<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="添加目录" :visible="open" width="500px" append-to-body
               @close="cancel()"
    >
      <el-form @submit.native.prevent ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="目录名称" prop="name">
          <el-input oninput="value=value.replace(/\//g, '')" v-model="form.name" maxlength="50" show-word-limit
                    placeholder="请输入目录名称"
          />
        </el-form-item>
        <el-form-item label="目录目标" prop="description">
          <el-input maxlength="500" show-word-limit :rows="3" v-model="form.target"
                    type="textarea" placeholder="请输入目录目标"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCourseIndex
} from '@/api/course/course'

export default {
  props: {
    //弹框显隐性
    open: Boolean,
    //是否是工学一体模板
    isElTemplate: [Number, String],
    //课程Id
    courseId: [Number, String],
    // 任务层的id,
    parentId: [Number, String],
    //新增排序
    sort: [Number, String]
  },
  data() {
    return {
      // 表单参数
      form: {
        name: '',
        target: ''
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    open() {
      this.reset()
    }
  },
  mounted() {
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          let obj = JSON.parse(JSON.stringify(this.form))
          obj.courseId = this.courseId
          obj.parentId = this.parentId
          obj.sort = this.sort
          obj.isElTemplate = this.isElTemplate
          //状态 0:草稿 1:发布
          obj.temporaryState = 0
          //课程目录类型 1-任务层 2-目录层 3-内容层 4-终结考试
          obj.type = 2
          const loading = this.$loading({
            lock: true,
            text: '正在处理...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          let res = await addCourseIndex(obj)
          const { code, data } = res
          if (code == 200) {
            this.$modal.msgSuccess('新增成功')
            this.$emit('refresh', data)
            this.$emit('update:open', false)
            loading.close()
          } else {
            loading.close()
          }
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        name: '',
        description: ''
      }
      this.resetForm('form')
    },
    cancel() {
      this.$emit('update:open', false)
      this.reset()
    }
  }
}
</script>
<style scoped lang="scss"></style>
